<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>React State</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

</head>

<body>

    <div id="example"></div>

    <script type="text/babel">
        class Demo extends React.Component {

            state = {input2: ""};

            showInput1 = () => {
                let input1 = document.getElementById("input1");
                alert(input1.value);
            }

            changeInput2 = (e)=> {
                this.setState({input2: e.target.value});
            }

            showInput2 = () => {
                alert(this.state.input2);
            }

            render() {
                console.log("我又走了一遍哦 ~");

                return (<div>
                    <p>
                        方法一：js原生写法，document.getElementById <br/>
                        <input id="input1" />
                        <button onClick={this.showInput1}>点我弹出输入框值</button>
                    </p>

                    <p>
                        方法二：我平常工作中用的，使用state, 但是这样也是够麻烦的，得写onChange, 而且state每次改变，都重新render一次，其实效率很差呀 <br/>
                        <input value={this.state.input2} onChange={this.changeInput2} />
                        <button onClick={this.showInput2}>点我弹出输入框值</button>
                    </p>

                </div>)
            };
        }

        ReactDOM.render(<Demo />, document.getElementById('example'));

    </script>

</body>

</html>